<template>
	<view class="">
		<u-popup style="text-align: center;" v-model="show" mode="center" border-radius="14" width="500rpx">
			<view style="margin: 20rpx 0;">{{$t('person.balanceInstructions')}}</view>
			<u-button @click="show = false" type="error" style="width: 80%;margin: 20rpx auto;">{{$t('person.know')}}</u-button>
		</u-popup>
		<view class="bl_header_box" :style="{backgroundImage: `url(${asyncImgs.balance.icon_balance_bg})`}">
			<view class="sub_title">{{$t('person.balance')}}</view>
			<view class="sub_cash">{{ money }}</view>
			<view class="sub_btn" @click="$utils.toUrl('/user/balance/recharge')">{{$t('person.pay')}}</view>
			<u-icon name="question-circle" class="balance_desc_icon" @click="show = true"></u-icon>
		</view>
		<view class="ad_banner"><image :src="asyncImgs.balance.icon_balance_ad" style="width: 100%;" mode="widthFix"></image></view>
		<view class="data_select_action">
			<u-icon name="arrow-left" @click="changeDate('pre')"></u-icon>
			<text style="margin: 0 20rpx;">{{ currentDate | dateFormat }}</text>
			<u-icon name="arrow-right" @click="changeDate('next')"></u-icon>
		</view>
		<u-cell-item
			v-for="(item, index) in list"
			:key="index"
			:arrow="false"
			:value="item.price"
			:label="item.date"
			:value-style="{ color: 'red' }"
		>
			<view class="item-title" slot="title">{{ item.content }}</view>
		</u-cell-item>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			list: [],
			currentDate: '2021-04',
			money: ''
		};
	},
	onLoad() {
		uni.setNavigationBarTitle({
			title:this.$t('title.balance')
		})
	},
	filters: {
		dateFormat(val) {
			return val.replace('-', '年') + '月';
		}
	},
	created() {
		this.currentDate = this.$utils.getNowFormatDate();
		const userInfo = uni.getStorageSync('userInfo');
		this.money = userInfo.money;
		this.getRecordList();
	},
	methods: {
		changeDate(type) {
			if (type == 'pre') {
				this.currentDate = this.$utils.getPreMonth(this.currentDate);
			} else {
				this.currentDate = this.$utils.getNextMonth(this.currentDate);
			}
			this.getRecordList()
		},
		async getRecordList() {
			try {
				const res = await this.$allrequest.user.recharge_list({ date: this.currentDate });
				this.list = res.data.list;
			} catch (e) {
				//TODO handle the exception
			}
		}
	}
};
</script>

<style scoped lang="scss">
page {
	background-color: rgb(237, 236, 232);
}
.ad_banner {
	width: 100%;
	padding: 20rpx 0;
}
.data_select_action {
	background-color: #fff;
	border-bottom: 1rpx solid rgb(213, 213, 213);
	padding: 20rpx 0;
	text-align: center;
}

.bl_header_box {
	background-repeat: no-repeat;
	background-size: 100%;
	position: relative;
	width: 100%;
	height: 300rpx;
	color: #fff;
	padding-top: 30rpx;
	.sub_title {
		width: 100%;
		padding: 20rpx 0;
		text-align: center;
		font-size: 26rpx;
	}
	.sub_cash {
		width: 100%;
		padding: 20rpx 0;
		text-align: center;
		font-size: 46rpx;
	}
	.sub_btn {
		font-size: 26rpx;
		border: 1rpx solid #fff;
		width: 150rpx;
		height: 48rpx;
		line-height: 38rpx;
		text-align: center;
		margin: 20rpx auto;
		border-radius: 30rpx;
	}
}
.balance_desc_icon {
	position: absolute;
	right: 20rpx;
	top: 40rpx;
	font-size: 32rpx;
}
.item-title {
	font-size: 26rpx;
	color: #000;
	line-height: 35rpx;
	width: 500rpx;
	min-width: 500rpx;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
}
</style>
